import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:get/get.dart';
import 'package:smart_ai_dart/consts/styles.dart';
import 'package:smart_ai_dart/pages/login_page/controller.dart';
import 'package:smart_ai_dart/utils/form_validators.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('login'.tr),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBuilder(
          key: controller.formKey, // 直接使用 controller
          initialValue: {
            'username': controller.defaultUsername, // 设置默认邮箱
            'password': controller.defaultPassword, // 设置默认密码
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FormBuilderTextField(
                name: 'username',
                inputFormatters: [
                  LengthLimitingTextInputFormatter(24)
                ], // 限制最多输入 24 位
                decoration: InputDecoration(
                  labelText: 'username'.tr,
                  border: const OutlineInputBorder(),
                  // 添加这些属性以显示错误提示
                  errorMaxLines: 2,
                  errorStyle: TextStyles.errorStyle,
                  helperStyle: TextStyles.helperStyle,
                ),
                validator: FormValidators.emailValidator,
                autovalidateMode: AutovalidateMode.onUserInteraction,
              ),
              const SizedBox(height: 16),
              Obx(
                () => FormBuilderTextField(
                  name: 'password',
                  obscureText: !controller.isPasswordVisible.value, // 控制密码可见性
                  inputFormatters: [
                    LengthLimitingTextInputFormatter(24)
                  ], // 限制最多输入 24 位
                  decoration: InputDecoration(
                    labelText: 'password'.tr,
                    border: const OutlineInputBorder(),
                    suffixIcon: IconButton(
                      icon: Icon(
                        controller.isPasswordVisible.value
                            ? Icons.visibility
                            : Icons.visibility_off,
                      ),
                      onPressed: controller.togglePasswordVisibility,
                    ),
                    // 添加这些属性以显示错误提示
                    errorMaxLines: 2,
                    errorStyle: TextStyles.errorStyle,
                    helperStyle: TextStyles.helperStyle,
                  ),
                  validator: FormValidators.passwordValidator,
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                ),
              ),
              const SizedBox(height: 24),
              Obx(
                () => ElevatedButton(
                  onPressed:
                      controller.isLoading.value ? null : controller.login,
                  child: controller.isLoading.value
                      ? const CircularProgressIndicator(color: Colors.white)
                      : Text('login'.tr),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
